<template>
  <div>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>
      <el-container>
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '3']">
            <router-link
              active-class="active"
              to="/emp"
              style="color: black; text-decoration: none"
              ><el-menu-item index="1">
                <template slot="title"
                  ><i class="el-icon-message"></i>员工管理</template
                >
              </el-menu-item></router-link
            >
            <router-link
              active-class="active"
              to="/about"
              style="color: black; text-decoration: none"
              ><el-menu-item index="2">
                <template slot="title"
                  ><i class="el-icon-message"></i>员工管理</template
                >
              </el-menu-item></router-link
            >
            <el-submenu index="3">
              <template slot="title"
                ><i class="el-icon-setting"></i>员工管理</template
              >
              <el-menu-item-group>
                <el-menu-item index="3-1">选项1</el-menu-item>
                <el-menu-item index="3-2">选项2</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main> <router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";

// 创建一个Axios实例，指定基础URL
const instance = axios.create({
  baseURL: "http://localhost:8080",
});

const options = {
  data: function () {
    return {};
  },
  mounted() {},

  methods: {},

  /* 计算属性,template调用时不用加括号，函数用加 */
  /* 相比方法的好处是，不改变就不会更新，有缓存 */
  computed: {},
};
export default options;
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 40px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>